<template>
    <div class="parent">
        <div class="explain">
            <p class="text">电子发票与纸质发票具有同等法律效力,可支持报销入账,电子发票最快五分钟开具,请注意查收。</p>
        </div>
        <ul class="list">
            <li class="listItem">
                <label class="labels" for="">抬头类型:</label>
                <div class="choice">
                    <p class="choiceItem" @click="choiceTT('enterprise')">
                        <i class="radio" ref="eChild" v-show="isEE"></i>
                        <i class="radio" ref="eChild" v-show="isE" style="border: 1px solid #F99817; background: #FFC726"></i>
                        <span class="textRadio">企业</span>
                    </p>
                    <p class="choiceItem" @click="choiceTT('personal')">
                        <i class="radio" ref="pChild" v-show="isPP"></i>
                        <i class="radio" ref="pChild" v-show="isP"></i>
                        <span class="textRadio">个人/非企业性单位</span>
                    </p>
                </div>
            </li>
        </ul>
        <div class="listCont">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
import bus from '../../config/bus.js'
export default {
    name: 'Electronics',
    data () {
        return {
            pIndex: 'enterprise',
            isE:true,
            isEE:false,
            isP: false,
            isPP: true
        }
    },
    methods: {
        choiceTT (item) {
            switch (item) {
                case 'enterprise': 
                    this.isE = true;
                    this.isEE = false;
                    this.isP = false;
                    this.isPP = true;
                    this.$refs.eChild.style.background = '#FFC726'
                    this.$refs.eChild.style.border = '1px solid #F99817'
                    this.$router.push({
                        path: '/Home/Reporting/Electronics/Elelist'
                    })
                    bus.$emit('ttType','企业')
                break;
                case 'personal':
                    this.isP = true;
                    this.isPP = false;
                    this.isE = false;
                    this.isEE = true;
                    this.$refs.pChild.style.background = '#FFC726'
                    this.$refs.pChild.style.border = '1px solid #F99817'
                    this.$router.push({
                        path: '/Home/Reporting/Electronics/Ele_perList'
                    })
                    bus.$emit('ttType','个人/非企业性单位')
                break;
            }
        }
    }
}
</script>
<style scoped lang="less">
.parent{
    width: 100%;
}
.explain{
    width: 100%;
    height: .933333rem;
    padding: 0 .533333rem;
    background: rgba(250,250,250,1);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .text{
        font-size:12px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(151,151,151,1);
        line-height:17px;
    }
}
.list{
    width: 100%;
    margin-top: .133333rem;
    background: #fff;
    .listItem{
        width: 100%;
        height: 1.333333rem;
        padding: 0 .48rem;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        
        .labels{
            display: block;
            width: 2.666667rem;
            height: 100%;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            font-size:12px;
            font-family:ArialMT;
            color:rgba(82,82,82,1);
            line-height:14px;
            letter-spacing:1px;
        }
        .choice{
            width: 6.4rem;
            height: 100%;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            .choiceItem{
                height: 100%;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                margin-left: .4rem;
                .radio{
                    display: block;
                    width: .373333rem;
                    height:.373333rem;
                    border-radius: 50%;
                    border: 1px solid rgba(0,0,0,0.4);
                    background: rgba(0,0,0,0.2);
                    margin-right: .133333rem;
                }
                .textRadio{
                    font-size:12px;
                    color:rgba(82,82,82,1);
                    font-family:ArialMT;
                    line-height:14px;
                    letter-spacing:1px;
                }
            }
        }
    }
    .listItem:after{
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        background: #cccccc;
        width: 100%;
        height: 1px;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
}

</style>

